<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--xml编码格式-->
<table border="1">
    <caption>list</caption>
    <tr>
        <th>title</th> <!--//商标-->
        <th>price</th><!--价格-->
        <th>stock</th><!--库存-->
    </tr>
</table>
<script>
    //js是面向对象的编程语言
    //定义一个对象
    let p1={
        name:"zhangsan",
        age: 18,
        run: function (){
            console.log(this.name+":"+this.age);
        }
    }
    p1.run();
    //定义一个空对象
    let p2={};
    p2.name="刘备";
    p2.age=30;
    p2.address="双福新区"
    p2.run=function () {
        console.log(this.name+":"+this.age+"地址:"+this.address);
    }
    p2.run();
    //通过自定义对象封装数据
    let product={title:"小米手机",price: 3000,num: 100};
    //通过数组封装多个对象的信息
    //json格式, proto格式,二进制存储和传输
    let arr=[{title:"小米手机",price:3000,num:100},
        {title:"华为电视",price:4000,num:200},
        {title:"蔚来汽车",price:500000,num:300}];

    let table=document.querySelector("table");
    //js循环结构
    //java循环 类型名称 变量 : 数组
    for (let p of arr){
        let tr = document.createElement("tr");
        let titleTd = document.createElement("td");
        let priceTd = document.createElement("td");
        let numTd = document.createElement("td");
        titleTd.innerText=p.title;
        priceTd.innerText=p.price;
        numTd.innerText=p.num;
        tr.append(titleTd,priceTd,numTd);
        table.append(tr);
    }
</script>
</body>
</html>